type 合併用法

首先，我們以餐廳與顧客為例，定義一個簡單的例子：

type Restaurant = {
  menu: string[]
  address: string
}

type Client = {
  name: string
  phone: string
}

假設在某些情況下，餐廳只需要 menu 和 address 這兩個屬性，而在其他情況下又需要 name 和 phone 屬性，這時我們該怎麼處理呢？

一個常見的做法可能是把它們的屬性通通放進一個型別中：

type RestaurantDetails = {
  menu: string[]
  address: string
  name: string
  phone: string
}

但這顯然不是最好的做法，畢竟我們已經將型別提取出來了。這時候，我們可以通過 TypeScript 中的 & 語法來合併兩個型別。這樣不僅能保持型別的分離，還提高了可讀性和維護性：

type Restaurant = {
  menu: string[]
  address: string
}

type Client = {
  name: string
  phone: string
}

type RestaurantDetails = Restaurant & Client

let restaurantInfo: RestaurantDetails

restaurantInfo = {
  menu: ['burger', 'pizza'],
  address: '123 main st',
  name: 'HAHA Restaurant',
  phone: '123-456-7890',
}

interface 合併用法

與前面的 type 合併寫法有所不同，在 interface 中，我們使用 extends 來合併型別。這種方式可以合併多個型別，只要在它們之間加上逗號 , 隔開即可：

interface Restaurant {
  menu: string[]
  address: string
}

interface Client {
  name: string
  phone: string
}

interface RestaurantDetails extends Restaurant, Client {}

let restaurantInfo: RestaurantDetails

restaurantInfo = {
  menu: ['burger', 'pizza'],
  address: '123 main st',
  name: 'HAHA Restaurant',
  phone: '123-456-7890',
}

根據我們前一篇文章提到的 interface 擴充特性，合併之後仍然可以進行擴充，並且不會影響現有結構：

interface Restaurant {
  menu: string[]
  address: string
}

interface Client {
  name: string
  phone: string
}

interface RestaurantDetails extends Restaurant, Client {
  minimumOrder: number
}

let restaurantInfo: RestaurantDetails

restaurantInfo = {
  menu: ['burger', 'pizza'],
  address: '123 main st',
  name: 'HAHA Restaurant',
  phone: '123-456-7890',
  minimumOrder: 20,
}

Literal Types

Literal Types 是指在型別系統中，直接指定一個特定的值，而不只是指定一個範圍內的型別。例如，當我們知道變數只會是某個固定值的時候，可以使用 Literal Types 來限制該變數的值：

type Status = 'open' | 'closed'

let restaurantStatus: Status

restaurantStatus = 'open' // 正確
restaurantStatus = 'closed' // 正確
restaurantStatus = 'pending' // 錯誤，因為 'pending' 不是 'open' 或 'closed'

也可以應用在我們之前提過的陣列型別：

type Permission = 'camera' | 'microphone' | 'closeRoom' | 'openRoom'

let arr: Array<Permission>

arr = ['camera', 'microphone']

這樣的寫法可以提高程式碼的嚴謹性，並在某些情境下有效防止潛在的錯誤。